<template>
    <div class="createPost-container">
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
      <div class="createPost-main-container">
        <el-row>
          <el-col :span="21">
            <el-form-item style="margin-bottom: 40px;" prop="name">
              <MDinput name="name" v-model="postForm.name" required :maxlength="100">
                商品标题
              </MDinput>
              <span v-show="postForm.name.length>=26" class='title-prompt'>移动端可能会显示不全</span>
            </el-form-item>

            <div class="postInfo-container">
              <el-row>
                <el-col :span="8">
                  <el-form-item  v-show="categoryView" label-width="75px" label="商品类型:" class="postInfo-container-item">
                    <el-select clearable class="filter-item"  v-model="postForm.category_id" placeholder="请选择商品类别">
                      <el-option v-for="item in  categoryOptions" :key="item.id" :label="item.name" :value="item.category_id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-tooltip class="item" effect="dark" content="商品进价" placement="top">
                    <el-form-item label-width="60px" label="进价:" class="postInfo-container-item">
                      <el-input placeholder="商品进价" style='min-width:150px;' type='number' min="0.01" step="0.01" v-model="postForm.xprice"></el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
                <el-col :span="8">
                  <el-tooltip class="item" effect="dark" content="商品售价" placement="top">
                    <el-form-item label-width="60px" label="售价:" class="postInfo-container-item">
                      <el-input placeholder="商品售价" style='min-width:150px;' type='number' min="0.01" step="0.01"  v-model="postForm.price">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="21">
            <div class="postInfo-container">
              <el-row>
                 <el-col :span="8">
                    <el-form-item label-width="75px" label="上/下架:" class="postInfo-container-item">
                      <el-select clearable class="filter-item"  v-model="postForm.status" placeholder="上/下架">
                        <el-option v-for="item in  statusOptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
                      </el-select>
                    </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-tooltip class="item" effect="dark" content="库存量,-1视为无限" placement="top">
                    <el-form-item label-width="60px" label="库存量:" class="postInfo-container-item">
                      <el-input placeholder="商品库存量,-1视为无限" style='min-width:150px;' type='number' min="-1" step="1" v-model="postForm.kucun">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
                <el-col :span="8">
                  <el-tooltip class="item" effect="dark" content="商品总销量" placement="top">
                    <el-form-item label-width="60px" label="总销量:" class="postInfo-container-item">
                      <el-input placeholder="商品总销量" style='min-width:150px;'  type='number' min="1" v-model="postForm.all_sales">
                      </el-input>
                    </el-form-item>
                  </el-tooltip>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="21">
            <div class="postInfo-container">
            <el-row>
              <el-col :span="8">
                <el-tooltip class="item" effect="dark" content="商品代理店价格" placement="top">
                  <el-form-item label-width="75px" label="代理店价:" class="postInfo-container-item">
                    <el-input placeholder="设置商品代理店价" style='min-width:195px;'  type='number'  min="0.00" step="0.01"  v-model="postForm.reseller_price">
                    </el-input>
                  </el-form-item>
                </el-tooltip>
              </el-col>
              <el-col :span="8">
                <el-tooltip class="item" effect="dark" content="商品排序,越大越排后" placement="top">
                  <el-form-item label-width="60px" label="排序:" class="postInfo-container-item">
                    <el-input placeholder="设置商品排序,数字越大越排后面" style='min-width:150px;'  type='number'  min="1" v-model="postForm.sort">
                    </el-input>
                  </el-form-item>
                </el-tooltip>
              </el-col>
          </el-row>
            </div>
          </el-col>
        </el-row>
        <el-form-item v-show="categoryView" style="margin-bottom: 40px;" label-width="74px" label="简单描述:" prop="describe">
          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.describe"></el-input>
          <span class="word-counter" v-show="describeLength">{{describeLength}}字</span>
        </el-form-item>
        <el-form-item style="margin-bottom: 40px;" label-width="74px" label="上传图片:">
          <el-radio-group v-model="img_select" size="small" @change='getImgType'>
            <el-radio label="upload" border>直接上传</el-radio>
            <el-radio label="search" border>图库查找</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- <el-form-item style="margin-bottom: 40px;" label-width="74px" label="图片地址">
          <el-input v-model="postForm.thumb" placeholder="Please url" style='width:600px;' readonly></el-input>
          <el-button type="primary" icon="document" @click='handleCopy(postForm.thumb,$event)'>copy</el-button>
        </el-form-item> -->

        <div style="margin-bottom: 20px;">
          <div  v-if="img_select=='upload'">
            <!-- // 图片类型->1商品,2头像,3,其他 -->
            <Upload v-model="postForm" imgType='1' @input-img="setUrl" :actionUrl='actionUrl' @view-img="viewImg" :tmpFile="tmpFile" ref="refupload"></Upload>  
          </div>
           <div  v-else>
             <!-- // 弹框 选则图片方式-2-->
            <img-temp @input-img="setUrl"></img-temp>  
          </div>

        </div>
        <el-form-item>
          <el-button type="primary"  :loading="loading" @click.stop="submitForm()">立即提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>


<script>
import imgTemp from '../image/img-temp'
import Upload from '@/components/Upload/singleImage3'
import { mapGetters } from 'vuex'
import MDinput from '@/components/MDinput'
import clip from '@/utils/clipboard' // use clipboard directly
import clipboard from '@/directive/clipboard/index.js' // use clipboard by v-directive
import * as api from '@/api/main-api' // API

export default {
  name: 'editProduct',
  directives: {
    clipboard
  },
  components: { Upload, MDinput, imgTemp },

  data() {
    return {

      postForm: {
        status: '0',
        name: '', // 题目
        price: '', // 售价
        xprice: '1.00', // 进价
        category_id: '', // 类别
        thumb: '', // 文章图片
        kucun: '9999999', // 库存
        sort: '100', // 排序
        id: undefined,
        unit_id: 0,
        all_sales: '0',
        describe: '店长很懒,什么都没写~',
        reseller_price: '0.00'
      },
      loading: false,
      img_select: 'upload',
      categoryOptions: [],
      categoryView: true,

      rules: {
        name: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        price: [
          { required: true, message: '请输入商品单价', trigger: 'blur' },
          { min: 0, message: '最小为 0 元', trigger: 'blur' }
        ],
        kucun: [
          { required: true, message: '商品库存不能为空', trigger: 'blur' },
          { type: 'number', min: 1, message: '库存最小单位为 1 个(件)', trigger: 'blur' }
        ],
        category_id: [
          { required: true, message: '必填信息', trigger: 'blur' }, { type: 'number', message: '必须是数字' }
        ],
        describe: [
          { min: 0, max: 120, message: '长度在 0 到 120 个字符', trigger: 'blur' }
        ]
      },
      statusOptions: [
        {
          id: '0',
          name: '下架'
        },
        {
          id: '1',
          name: '上架'
        }
      ],
      tmpFile: '',
      // 图片提交地址(暂时没有用,用后台上传)
      actionUrl: process.env.BASE_API + '/admin/v1/imgupload'
    }
  },

  computed: {
    // 从 vuex 去除数据
    ...mapGetters(['goods_info', 'outlet_id', 'set_page_params']),
    describeLength() {
      if (this.categoryView) {
        return this.postForm.describe.length
      }
    }

  },

  created() {
    this.showType()
    var space = this.$route.query.sp
    if (this.$route.query.es === 'edit' || space === 'space') {
      if (this.goods_info) {
        if (typeof (this.goods_info.describe) === 'undefined') {
          this.categoryView = false
        }
        this.postForm = this.goods_info
      }
      // 规格
      if (space === 'space') {
        this.categoryView = false
        this.postForm.product_id = this.goods_info.id
        delete this.postForm.id
      }
    }
  },

  methods: {
    // 改变 url 地址
    getImgType(val) {
      if (val === 'upload') { // 直接上传
        this.postForm.thumb = this.goods_info.thumb
      }
    },

    // 将选择的文件放到当前vue中,先显示后一起上传
    viewImg(file) {
      this.tmpFile = file.url // 本地缓存图片
    },

    // 获取类别数据
    showType() {
      const query = {
        unit_id: this.outlet_id
      }
      api.categoryApi(query).then(response => {
        this.categoryOptions = response.data.data
      })
    },

    // 图片提交后返回的 url
    setUrl(url) {
      if (url === '') { //  rmove
        this.tmpFile = ''
      } else {
        this.postForm.thumb = url
        if (this.tmpFile !== '') {
          this.postDataUrl(this.postForm, this.postForm)
        }
      }
    },

    // 表单提交
    submitForm() {
      this.postForm.unit_id = this.outlet_id
      this.$refs.postForm.validate(valid => {
        if (valid) {
          this.loading = true
          // 先提交图片在提交商品,没修改不提交
          if (this.tmpFile !== '') {
            this.$refs.refupload.handleSubmit()
          } else {
            this.postDataUrl(this.postForm, this.postForm)
          }
        } else {
          console.log('error submit!!')
          this.loading = false
          return false
        }
      })
    },

    // 商品提交数据
    postDataUrl(data, row) {
      api.editProductApi(data, row).then(response => {
        if (response.data.code === 0) {
          this.$root.message('操作成功', 'success')
          setTimeout(() => {
            this.$router.push({ path: '/product/index' })
          }, 30)
        }
      })
      this.loading = false
    },

    resetForm() {
      this.$refs['postForm'].resetFields()
    },

    // 复制 url
    handleCopy(text, event) {
      clip(text, event)
    }

  },

  // 监事事件
  watch: {
    outlet_id(id) {
      this.$nextTick(() => {
        this.set_page_params.unit_id = id
        this.$store.dispatch('setPageParams', this.set_page_params)
        this.$router.go(-1)
      })
    }
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt{
    position: absolute;
    right: 0px;
    font-size: 12px;
    top:10px;
    color:#ff4949;
  }
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
            text-align: right;
            margin-right: 10px;
            .editor-upload-btn {
                display: inline-block;
            }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>